import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_swiper_plus/flutter_swiper_plus.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/utils/styles.dart';
import '../controller.dart';

class MineMemberCenterPage extends GetView<MineMemberCenterController> {
  const MineMemberCenterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(Get.mediaQuery.padding.top + 44),
        child: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle.dark,
          child: Container(
            padding: Get.mediaQuery.padding,
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: HexColor(HexColor.colorF2f2),
                ),
              ),
            ),
            child: TextButton(
              onPressed: Get.back,
              child: Text.rich(
                TextSpan(
                  children: [
                    const WidgetSpan(
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 18,
                        color: Colors.black,
                      ),
                    ),
                    TextSpan(
                      text: ' 会员中心',
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize16,
                        color: HexColor.color3333,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(vertical: 15),
        child: Column(
          children: [
            SizedBox(
              height: 200,
              child: Swiper.children(
                itemHeight: 200,
                containerHeight: 200,
                scale: 0.8,
                viewportFraction: 0.8,
                customLayoutOption:
                    CustomLayoutOption(startIndex: -1, stateCount: 4)
                        .addRotate([-25.0 / 180, 0.0, 25.0 / 180]).addTranslate(
                  const [
                    Offset(-350.0, 0.0),
                    Offset(0.0, 0.0),
                    Offset(350.0, 0.0)
                  ],
                ),
                onIndexChanged: (int index) {
                  controller.memberIndex.value = index;
                },
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: HexColor('#FEFEC4'),
                      border: Border.all(
                        color: HexColor('#F5EBBE'),
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    padding: const EdgeInsets.only(
                        left: 15, right: 15, top: 25, bottom: 15),
                    child: Column(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '普通会员',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.colorCc99,
                              fontWeight: FontWeight.w700,
                              fontSize: StylesUtils.fontSize20,
                            ),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 8),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '当前会员等级',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.rgba(204, 153, 0, 0.8)),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 16),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '再消费2000元即可升级成为银卡',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.rgba(204, 153, 0, 0.8)),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 40),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '有效期   永久有效',
                            style: StylesUtils.textStyle(
                              fontSize: StylesUtils.fontSize12,
                              color: HexColor.rgba(204, 153, 0, 0.8),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: HexColor('#FEFEC4'),
                      border: Border.all(
                        color: HexColor('#F5EBBE'),
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    padding: const EdgeInsets.only(
                        left: 15, right: 15, top: 25, bottom: 15),
                    child: Column(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '白银会员',
                            style: StylesUtils.textStyle(
                              color: HexColor.rgba(
                                  153, 153, 153, 0.658823529411765),
                              fontWeight: FontWeight.w700,
                              fontSize: StylesUtils.fontSize20,
                            ),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 8),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '当前会员等级',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.rgba(204, 153, 0, 0.8)),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 16),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '再消费3000元即可升级成为银卡',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.rgba(204, 153, 0, 0.8)),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 40),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '有效期   永久有效',
                            style: StylesUtils.textStyle(
                              fontSize: StylesUtils.fontSize12,
                              color: HexColor.rgba(204, 153, 0, 0.8),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: HexColor('#FEFEC4'),
                      border: Border.all(
                        color: HexColor('#F5EBBE'),
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    padding: const EdgeInsets.only(
                        left: 15, right: 15, top: 25, bottom: 15),
                    child: Column(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '黄金会员',
                            style: StylesUtils.textStyle(
                              color: HexColor.rgba(
                                  255, 199, 28, 0.858823529411765),
                              fontWeight: FontWeight.w700,
                              fontSize: StylesUtils.fontSize20,
                            ),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 8),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '当前会员等级',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.rgba(204, 153, 0, 0.8)),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 16),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '再消费4000元即可升级成为银卡',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.rgba(204, 153, 0, 0.8)),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 40),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '有效期   永久有效',
                            style: StylesUtils.textStyle(
                              fontSize: StylesUtils.fontSize12,
                              color: HexColor.rgba(204, 153, 0, 0.8),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: HexColor('#FEFEC4'),
                      border: Border.all(
                        color: HexColor('#F5EBBE'),
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    padding: const EdgeInsets.only(
                        left: 15, right: 15, top: 25, bottom: 15),
                    child: Column(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '白金会员',
                            style: StylesUtils.textStyle(
                              color: HexColor(HexColor.colorFfc7),
                              fontWeight: FontWeight.w700,
                              fontSize: StylesUtils.fontSize20,
                            ),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 8),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '当前会员等级',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.rgba(204, 153, 0, 0.8)),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 16),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '再消费5000元即可升级成为银卡',
                            style: StylesUtils.textStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.rgba(204, 153, 0, 0.8)),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 40),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '有效期   永久有效',
                            style: StylesUtils.textStyle(
                              fontSize: StylesUtils.fontSize12,
                              color: HexColor.rgba(204, 153, 0, 0.8),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              alignment: Alignment.center,
              margin: const EdgeInsets.only(top: 30),
              child: Obx(
                () => Container(
                  width: 334,
                  height: 180,
                  padding: const EdgeInsets.only(
                      left: 15, right: 15, bottom: 15, top: 20),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        offset: const Offset(0, 2),
                        spreadRadius: 0,
                        blurRadius: 10,
                        color: HexColor.rgba(204, 204, 204, 0.4),
                        blurStyle: BlurStyle.outer,
                      )
                    ],
                  ),
                  child: Column(
                    children: [
                      Container(
                        margin: const EdgeInsets.only(bottom: 20),
                        child: Text(
                          controller.memberLevel[controller.memberIndex.value],
                          style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            color: HexColor.color3333,
                            fontSize: StylesUtils.fontSize16,
                          ),
                        ),
                      ),
                      StaggeredGrid.count(
                        crossAxisCount: 4,
                        crossAxisSpacing: 0,
                        mainAxisSpacing: 20,
                        children: [
                          for (var i = 1; i < 7; i++)
                            Column(
                              children: [
                                Align(
                                  alignment: Alignment.center,
                                  child: Image.network(
                                    'https://img.axureshop.com/3b/c6/00/3bc600fcb1144d98b45d1938af7321cc/images/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83/u3779.png',
                                    width: 15,
                                    height: 20,
                                    fit: BoxFit.fill,
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 8),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '权益$i',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.color6666,
                                      fontSize: StylesUtils.fontSize12,
                                    ),
                                  ),
                                )
                              ],
                            )
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 30, left: 15, right: 15),
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    margin: const EdgeInsets.only(bottom: 15),
                    child: Text.rich(
                      TextSpan(
                        children: [
                          TextSpan(
                            text: '会员专享折扣   ',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              color: HexColor.color3333,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                          TextSpan(
                            text: '最高可享受8.9折',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.colorCccc,
                              fontSize: StylesUtils.fontSize12,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  AlignedGridView.count(
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: 20,
                    itemBuilder: (_, i) {
                      return Column(
                        children: [
                          Stack(
                            children: [
                              ClipRRect(
                                borderRadius: BorderRadius.circular(5.r),
                                child: Image.network(
                                  'https://img2.baidu.com/it/u=1407638119,2449258627&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=235',
                                  height: 110,
                                  fit: BoxFit.fill,
                                ),
                              ),
                              Positioned(
                                top: 8,
                                right: 20,
                                child: Container(
                                  constraints: const BoxConstraints.expand(
                                      width: 82, height: 20),
                                  decoration: BoxDecoration(
                                    color: HexColor.rgba(
                                        0, 0, 0, 0.498039215686275),
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '南锣鼓巷附近',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize10,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 10),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '锦江之星（背景王府井店）',
                              style: StylesUtils.customTextStyle(
                                fontWeight: FontWeight.w700,
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 5),
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 10,
                              alignment: WrapAlignment.start,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              children: [
                                Text(
                                  '4.6分',
                                  style: StylesUtils.customTextStyle(
                                    color: HexColor.color28d0,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                                Text(
                                  '5000+消费',
                                  style: StylesUtils.customTextStyle(
                                    color: HexColor.color3333,
                                    fontSize: StylesUtils.fontSize12,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 5),
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 10,
                              alignment: WrapAlignment.start,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              children: [
                                Text(
                                  '360',
                                  style: StylesUtils.customTextStyle(
                                    color: HexColor.colorFf62,
                                    fontWeight: FontWeight.w700,
                                    fontSize: StylesUtils.fontSize16,
                                  ),
                                ),
                                Text(
                                  '起',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize12,
                                      color: HexColor.color9999),
                                ),
                                Container(
                                  constraints: const BoxConstraints.expand(
                                      width: 55, height: 20),
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: HexColor(HexColor.colorFfc7),
                                    ),
                                  ),
                                  child: Text(
                                    '新人红包',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFfc7,
                                      fontSize: StylesUtils.fontSize10,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          )
                        ],
                      );
                    },
                    crossAxisCount: 2,
                    crossAxisSpacing: 15,
                    mainAxisSpacing: 20,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
